<template>
  <div class="admin-layout">
    <el-container>
      <el-aside id = "aside-menu" width="200px">
        <h5 class="mb-2" style="text-align: center; padding-bottom: 10px;">仅帅哥可见</h5>
        <el-menu
          default-active="1-2"
          class="el-menu-vertical-demo"
        >
          <el-sub-menu v-for="(tag) in tags" :index= "tag.id?.toString()">
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{ tag.name }}</span>
            </template>
              <el-menu-item v-for="(emperor) in tag.emperorList" :index="tag.id?.toString() +'-'+ emperor.id?.toString()"
              @click="showContent(tag.name,emperor)">
                {{ emperor.name }}
              </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <section>
            <h1 class="textContent">{{ emperorInfo.name }}</h1>
        </section>
        <section style="max-width: 800px; margin: auto;">
            <el-timeline style="max-width: 800px">
              <el-timeline-item v-for="vitaeItem in vitaes" :timestamp="vitaeItem.year + '年'" placement="top">
                <el-card>
                    <h4>{{ vitaeItem.digest }}</h4>
                    <p>{{ vitaeItem.details }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
        </section>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onBeforeMount, onMounted,computed,ref, nextTick, Ref } from 'vue'
import axios from '@/request'
import api from '@/api/index'
import { Vitae, Tag, Emperor } from '@/type/Story';

const emperorInfo: Ref<Emperor> = ref({});
const showContent = (dynasty?: string, emperor?: Emperor) => {
  // console.log(dynasty);
  emperorInfo.value = emperor? emperor:{};
  getStoryDetails(emperor?.id);
}

// 查询tag信息
const tags: Ref<Tag[]> = ref([])
getTags();
function getTags() {
  const resp = axios.get<Tag[]>(api.tag);
  resp.then((res)=>{
    tags.value = res.data? res.data:[];
    // console.log(tags.value);
    // 显示第一个tags里的emperor
    const _emperorListStr = tags.value[0]?.emperorList;
    if(_emperorListStr){
      const _emperorList = _emperorListStr as Emperor[];
      emperorInfo.value = _emperorList[0];
      getStoryDetails(_emperorList[0].id);
    }
  });
}

const vitaes: Ref<Vitae[]> = ref([])
// 查询历史人物简历
// getStoryDetails(1);
function getStoryDetails(emperorId?: number) {
  const params = {
    emperorId: emperorId
  }
  // 请求需要的参数
  const resp = axios.get<Vitae[]>(api.vitaeByEmperor, params);
    resp.then((res)=>{
    vitaes.value = res.data? res.data:[];
    // console.log(vitaes.value);
  });
}

</script>
<style scoped lang='less'>
.textContent {
    text-align: center
}
h4 {
    display: block;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
</style>